﻿<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<link rel="stylesheet" href="css/style.css"/>
<!-- <link rel="stylesheet" href="css/scrollbar/scrollbar.css"/> -->
<link rel="stylesheet" href="script/jqm/css/jquery.mobile-1.4.2.min.css"/>
<script src="script/jqm/js/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="script/jqm/js/jquery.mobile-1.4.2.min.js" type="text/javascript"></script>
<script src="script/cordova.js" type="text/javascript"></script>
    <title>Hello PhoneGap</title>
    <script type="text/javascript" charset="utf-8">
        function loadImage() {
            //拍照并显示在屏幕
            navigator.camera.getPicture(onLoadImageSuccess, onLoadImageFail, {destinationType: Camera.DestinationType.DATA_URL});
        }
        //拍照成功后回调
        function onLoadImageSuccess(imageURI) {
            //这里的图片经过了base64编码
            var src = "data:image/jpeg;base64," + imageURI;
            $("#getImage").attr("src", src);
            $("#getImage").show();
        }
        //所有获取图片失败都回调此函数
        function onLoadImageFail(message) {
            navigator.notification.alert("拍照失败，原因：" + message, null, "警告");
        }
        function loadImageLocal() {
            //获取本地图片并显示在屏幕
            navigator.camera.getPicture(onLoadImageLocalSuccess, onLoadImageFail, {
                destinationType: Camera.DestinationType.FILE_URI,
                sourceType: Camera.PictureSourceType.PHOTOLIBRARY
            });
        }
        //本地图片选择成功后回调此函数
        function onLoadImageLocalSuccess(imageURI) {
            $("#getImageLocal").attr("src", imageURI);
            $("#getImageLocal").show();
        }
        function loadImageUpload() {
            //拍照上传并显示在屏幕
            navigator.camera.getPicture(onLoadImageUploadSuccess, onLoadImageFail, {
                destinationType: Camera.DestinationType.FILE_URI
            });
        }
        //图片拍照成功后回调此函数
        function onLoadImageUploadSuccess(imageURI) {
            //此处执行文件上传的操作，上传成功后执行下面代码
            var options = new FileUploadOptions(); //文件参数选项
            options.fileKey = "file";//向服务端传递的file参数的parameter name
            options.fileName = imageURI.substr(imageURI.lastIndexOf('/') + 1);//文件名
            options.mimeType = "image/jpeg";//文件格式，默认为image/jpeg
            var ft = new FileTransfer();//文件上传类
            ft.onprogress = function (progressEvt) {//显示上传进度条
                if (progressEvt.lengthComputable) {
                    navigator.notification.progressValue(Math.round(( progressEvt.loaded / progressEvt.total ) * 100));
                }
            }
            navigator.notification.progressStart("提醒", "当前上传进度");
            ft.upload(imageURI, encodeURI('http://192.168.0.32:8888/app/upload.jfinal'), function () {
                navigator.notification.progressStop();//停止进度条
                $("#getImageUpload").attr("src", imageURI);
                $("#getImageUpload").show();
                navigator.notification.alert("文件上传成功！", null, "提醒");
            }, null, options);
        }
    </script>
</head>
<body>
<h1>Hello PhoneGap</h1>

<p>
    <input type="button" value="拍照" onclick="loadImage();"/>
    <img src="" id="getImage" style="display: none;width: 120px;height: 120px;"/>
</p>

<p>
    <input type="button" value="本地图片" onclick="loadImageLocal();"/>
    <img src="" id="getImageLocal" style="display: none;width: 120px;height: 120px;"/>
</p>

<p>
    <input type="button" value="拍照上传" onclick="loadImageUpload();"/>
    <img src="" id="getImageUpload" style="display: none;width: 120px;height: 120px;"/>
</p>
</body>
</html>